<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数组语法示例</title>
  <style>
    .active {
      color: green;
      font-weight: bold;
    }
    .text-danger {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 使用数组语法绑定 class -->
    <p v-bind:class="[activeClass, errorClass]">这是一段文本</p>
    <button @click="toggleError">切换错误样式</button>
  </div>

  <script src="../../../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',      // 始终应用 active 样式
        errorClass: 'text-danger'   // 初始时应用错误样式
      },
      methods: {
        toggleError: function() {
          // 切换 errorClass，在 'text-danger' 与空字符串之间切换
          this.errorClass = this.errorClass === 'text-danger' ? '' : 'text-danger';
        }
      }
    });
  </script>
</body>
</html>